<!--  -->
<template>
  <div class="userEditPage">
    <EditPageTitle :titleLabel="view_title_label" />
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          type="text"
          v-model="ruleForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input
          type="text"
          v-model="ruleForm.mobile"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="ruleForm.status" placeholder="请选择账号状态">
          <el-option label="启用" value="0"></el-option>
          <el-option label="禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">保存</el-button>
        <el-button @click="resetForm()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    // var checkUserName = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("用户名不能为空"));
    //   }
    // };
    // var validateMobile = (rule, value, callback) => {
    //   console.log(value);
    //   let regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
    //   if (value === "") {
    //     callback(new Error("请输入手机号"));
    //   } else if (!regs.test(value)) {
    //     callback(new Error("手机号输入不合法"));
    //   } else {
    //     callback();
    //   }
    // };
    // var validatePass = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请输入密码"));
    //   } else {
    //     if (this.ruleForm.checkPass !== "") {
    //       this.$refs.ruleForm.validateField("checkPass");
    //     }
    //     callback();
    //   }
    // };
    // var validatePass2 = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请再次输入密码"));
    //   } else if (value !== this.ruleForm.password) {
    //     callback(new Error("两次输入密码不一致!"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      ruleForm: {
        id: "",
        username: "",
        mobile: "",
        status: "0",
        password: "",
        checkPass: "",
      },
      // rules: {
      //   username: [{ validator: checkUserName, trigger: "blur" }],
      //   mobile: [{ validator: validateMobile, trigger: "blur" }],
      //   pass: [{ validator: validatePass, trigger: "blur" }],
      //   checkPass: [{ validator: validatePass2, trigger: "blur" }],
      // },
      // 当前所处背景
      env: "",
      view_title_label: "账号编辑",
    };
  },
  components: {},
  computed: {},
  mounted() {
    // 路由传递的类型参数  新增：add  编辑：edit 草稿箱编辑：draftEdit
    const type = this.$route.params.type;
    console.log(type);
    switch (type) {
      case "add":
        this.view_title_label = this.view_title_label + "新增";
        this.env = "add";
        break;
      case "edit":
        this.view_title_label = this.view_title_label + "编辑";
        this.env = "edit";
        this.getData();
        break;
      default:
        break;
    }
    // 路由传递的参数id
    const id = this.$route.params.id;
  },
  methods: {
    submitForm() {
      console.log("提交");
      if (this.ruleForm.username == "") {
        console.log("提交1");
        this.$message.error("用户名不能为空");
        return false;
      }
      if (this.ruleForm.mobile == "") {
        console.log("提交2");
        this.$message.error("账号不能为空");
        return false;
      }
      if (this.ruleForm.password == "") {
        console.log("提交3");
        this.$message.error("密码不能为空");
        return false;
      }
      console.log("提交4" + this.env);
      if (this.env == "edit") {
        console.log("编辑");
        //编辑后保存并上架
        this.$api.userApi
          .saveUserMsg({
            id: this.$route.params.id,
            username: this.ruleForm.username,
            mobile: this.ruleForm.mobile,
            password: this.ruleForm.password,
            password2: this.ruleForm.checkPass,
            status: this.ruleForm.status,
          })
          .then((res) => {
            if (res.data.statu == 0) this.succeedBack();
            if (res.data.statu == 4001) this.$message.error(res.data.msg);
            if (res.data.statu == 1) this.$message.error(res.data.msg);
          });
      } else if (this.env == "add") {
        console.log("新增");
        //新增
        this.$api.userApi
          .saveUserMsg({
            username: this.ruleForm.username,
            mobile: this.ruleForm.mobile,
            password: this.ruleForm.password,
            password2: this.ruleForm.checkPass,
            status: this.ruleForm.status,
          })
          .then((res) => {
            if (res.data.statu == 0) this.succeedBack();
          });
      }
    },
    resetForm() {
      console.log("取消");
    },
    getData() {
      this.$api.userApi
        .getUserMsg({
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          res.data.status = res.data.status + "";
          res.data.password = "";
          this.ruleForm = Object.assign({}, this.ruleForm, res.data);
        });
    },
    succeedBack() {
      this.$router.go(-1);
    },
  },
};
</script>
<style  scoped>
</style>